@import './common-var.less';

.read-center {
  display: flex;
  height: 100vh;

  .layout-module_wrapper {
    display: flex;

    .layout-module_directoryWrapper {
      background: #FFFFFF;
      color: @dark-font-color;
      overflow: hidden;
      position: relative;

      .layout-module_fixed {
        height: 100vh;
        border-right: 1px solid @light-border-color;
      }

      .layout-module_directory {

        .directory-header {
          display: flex;
          align-items: center;
          flex-flow: column;
          margin: 0 10px;
          border-bottom: 1px solid @border-color_normal;
          padding: 0 0 6px;

          .book-info {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            position: relative;

            .crumb {
              display: flex;
              align-items: center;
              width: 100%;
              height: 45px;
              padding: 16px 16px 6px 20px;
              justify-content: left;

              .crumb-text {
                font-size: 14px;
                font-weight: 600;
                cursor: pointer;
                color: @dark-font-color;
                flex: 1;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                line-height: 45px;

                &:hover {
                  color: @light-font-color;
                }
              }

              .logo {
                font-size: 22px;
                line-height: 45px;
              }

              .to-right {
                font-size: 10px;
                line-height: 45px;
                margin: 0 5px;
                color: @grey-white-font-color;
              }

              .action {
                display: flex;
                align-items: center;

                .iconfont {
                  margin: 0 5px;
                }
              }

            }
          }
        }

        .directory-nav {
          .search-nav {
            display: flex;
            align-items: center;
            margin: 16px 8px;

            .search-bar {
              display: flex;
              align-items: center;
              padding: 5px 8px;
              cursor: pointer;
              background: #F4F5F5;
              font-size: 14px;
              color: @grey-white-font-color;
              flex: 1;
              border-radius: 8px;
              position: relative;

              .i-search {
                margin-right: 10px;
              }
            }
          }

          .home-nav {
            display: flex;
            align-items: center;
            padding: 5px 8px;
            margin: 10px 8px;
            cursor: pointer;
            border-radius: 6px;
            position: relative;

            .home {
              font-weight: bold;
              margin-right: 10px;
            }
          }

          .home-nav:hover, .active-home {
            background-color: #EFF0F0;
          }

          .nav-tabs {
            box-sizing: border-box;
            flex-direction: column;
            margin: 0;
            padding: 0;
            font-size: 14px;
            font-variant: tabular-nums;
            line-height: 1.5715;
            list-style: none;
            font-feature-settings: "tnum";
            display: flex;
            overflow: hidden;
            border-bottom: unset;


            .tabs-bar {
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 0 16px 0 8px;
              line-height: 32px;
              border-bottom: 1px solid transparent;

              .tab-title, .tab-list {
                display: flex;
                align-items: center;
                border-right: 6px;
                padding: 0 8px;
                cursor: pointer;

                .iconfont {
                  margin-right: 12px;
                }
              }

              .tab-list {
                cursor: unset;
              }

              .tab-title:hover, actions-cont:hover {
                background-color: #EFF0F0;
                border-radius: 4px;
              }

              .actions-cont {
                display: flex;
                justify-content: flex-end;
                align-items: center;

                .action-item {
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  margin-left: 8px;
                  width: 20px;
                  min-width: 20px;
                  height: 20px;
                  color: @grey-white-font-color;
                  cursor: pointer;
                  transition: background .35s ease-in-out;
                  border-radius: 2px;
                }
              }
            }

            .tabs-content-holder {
              flex: auto;
              min-width: 0;
              min-height: 0;
              padding-right: 2px;

              .tabs-content {
                display: flex;
                width: 100%;

                .tabs-tabpane {
                  flex: none;
                  width: 100%;
                  outline: none;
                  position: relative;
                  max-height: calc(~"100vh - 150px");
                  will-change: transform;
                  direction: ltr;
                  padding-top: 8px;

                  .tabpane-list {
                    padding: 0 10px 8px 10px;

                    /deep/ .ivu-list-item {
                      padding: 8px;
                      border-radius: 4px 4px 1px 1px;
                    }

                    .current-article {
                      background: #EFF0F0;
                    }

                    .ivu-list-item:hover {
                      cursor: pointer;
                      background: #EFF0F0;
                    }

                    /deep/ .ivu-list-item-meta {
                      width: 100%;
                    }

                    /deep/ .ivu-list-item-meta-content {
                      width: 100%;
                    }

                    /deep/ .ivu-list-item-meta-description {
                      color: #262626;

                      .title {
                        flex: 1;
                        font-size: 14px;
                        height: 22px;
                        color: #262626;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        -webkit-line-clamp: 1;
                        -webkit-box-orient: vertical;
                        line-height: 22px;
                        display: -webkit-box;
                        margin-bottom: 2px;
                      }

                      .description {
                        color: #8A8F8D;
                        font-size: 13px;
                        word-break: break-all;
                        display: -webkit-box;
                        max-height: 44px;
                        min-height: 22px;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        line-height: 22px;
                      }

                      .operate {
                        width: 22px;
                        display: flex;
                        justify-content: center;
                        border-radius: 3px;

                        &:hover {
                          background: @border-color_normal;
                        }
                      }

                      .icon-nav-menu {
                        display: flex;
                        width: 22px;
                        justify-content: center;
                      }

                      .icon-nav-menu:hover {
                        cursor: pointer;
                        background-color: #D8DAD9;
                        border-radius: 4px;
                      }
                    }
                  }
                }

                .tabs-tabpane {
                  overflow-y: auto;
                  overflow-x: hidden;

                  &::-webkit-scrollbar-thumb {
                    background-color: unset;
                    border-radius: 4px;
                  }

                  &::-webkit-scrollbar {
                    width: 6px;
                  }

                  &:hover::-webkit-scrollbar {
                    width: 6px;
                  }

                  &:hover::-webkit-scrollbar-thumb {
                    background-color: #8B8B8B;
                    border-radius: 4px;
                  }
                }
              }
            }
          }
        }
      }

      .layout-module_dragbar {
        cursor: ew-resize;
        width: 6px;
        z-index: 99;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        transition: background-color 0.3s;
      }

      &:hover {
        border-color: @border-color_normal;
      }
    }

    .reader-route-view {
      /deep/ .operate-more {
        .ant-popover-arrow {
          display: none;
        }

        .ant-popover-inner-content {
          color: @dark-font-color;
          width: 200px;
          font-size: 12px;

          .del-warn-btn {
            margin: 10px 0 0;
            display: flex;
            flex-direction: row-reverse;

            .ivu-btn {
              font-size: 13px;
            }

            .ivu-btn-success {
              margin-left: 10px;
            }

            .ivu-btn-default {
              color: @dark-font-color;

              &:hover {
                color: @primary-color;
              }
            }
          }
        }
      }
    }
  }
}

/deep/ .tabpane-tree {
  padding: 0 10px 8px 10px;

  .ivu-tree-children {
    padding-left: 8px;
    flex: 1;
    font-size: 14px;
    color: @dark-font-color;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    left: 0px;
    cursor: pointer;
    align-items: center;

    li {
      margin: unset !important;
      width: 100%;
    }

    .ivu-tree-arrow {
      padding: 6px 0;
    }

    .ivu-tree-title {
      color: @dark-font-color;
      margin: 2px 0;
      padding: 6px 0 6px 5px;
      width: calc(~"100% - 15px");
      border-radius: 4px;

      &:hover {
        background: @editor-item-hover;
      }
    }

    .ivu-tree-title-selected {
      background: @dropdown-item-hover;

      &:hover {
        cursor: pointer;
        background: @dropdown-item-hover;
        border-radius: 4px;
      }
    }
  }
}

/deep/ .search-modal {
  .modal-search-body {
    padding: 0 10px;

    .search-tip {
      color: @light-font-color;
    }

    .modal-search-input {
      color: @dark-font-color;
      height: 32px;
      display: flex;
      align-items: center;

      .input-prefix {
        display: flex;
        align-items: center;
        margin-right: 5px;

        * {
          line-height: 32px;
        }

        .i-search, .update-ing {
          margin-right: 10px;
          font-size: 18px;
        }

        .search-scope {
          line-height: 32px;
        }

        em {
          margin: 0 2px;
          color: @grey-white-font-color;
        }
      }

      .input-suffix {
        margin-left: 10px;
        color: @light-font-color;

        * {
          line-height: 32px;
        }

        &:hover {
          color: @dark-font-color;

          .iconfont {
            border-color: @light-font-color;
          }
        }

        .iconfont {
          border: 1px solid #8A8F8D;
          border-radius: 3px;
          cursor: pointer;

          &:first-child {
            margin-right: 5px;
          }
        }
      }

      .input-box {
        flex-grow: 1;
        display: flex;
        align-items: center;

        input {
          background: unset;
          min-width: 95%;
          border: none;
          outline: none;
        }

        .search-error {
          /* Chrome, Safari, Opera */

          &::-webkit-input-placeholder {
            color: red;
          }

          /* Firefox 19+ */

          &:-moz-placeholder {
            color: red;
          }

          /* Firefox 4 - 18 */

          &::-moz-placeholder {
            color: red;
          }

          /* Internet Explorer 10+ */

          &:-ms-input-placeholder {
            color: red;
          }

          /* Edge */

          &::-ms-input-placeholder {
            color: red;
          }

          /* Standard syntax */

          &::placeholder {
            color: red;
          }
        }

        .clear {
          cursor: pointer;
          color: @light-font-color;

          &:hover {
            color: @dark-font-color;
          }
        }

        * {
          line-height: 32px;
        }
      }
    }

    .ivu-divider {
      margin: 15px 0;
    }

    .select-search-scope {
      .search-scope-list {
        list-style-type: none;
        margin-top: 10px;

        .search-scope-item {
          line-height: 16px;
          margin: 5px 0 5px -5px;
          padding: 4px 5px;
          border-radius: 5px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          cursor: pointer;

          .scope-content {
            display: flex;
            align-items: center;
            width: 80%;
            line-height: 24px;

            .scope-text {
              margin-left: 5px;
            }

            .logo {
              font-size: 17px;
            }
          }

          .select-scope {
            color: @light-font-color;
            visibility: hidden;

            &:hover {
              color: @dark-font-color;

              .enter {
                //border-color: @dark-font-color;
              }
            }

            .enter {
              border: 1px solid #8A8F8D;
              border-radius: 3px;
            }
          }

          &:hover {
            background: @dropdown-item-hover;

            .select-scope {
              visibility: visible;
            }
          }
        }

        .selected {
          background: @dropdown-item-hover;

          .select-scope {
            visibility: visible
          }
        }
      }
    }

    .search-result-list {
      list-style-type: none;

      .search-tip {
        margin-bottom: 10px;
      }

      .search-result-item {
        color: @dark-font-color;
        display: flex;
        margin-bottom: 10px;

        .item-icon {
          display: flex;
          align-items: center;
          flex-direction: column;
          margin-right: 8px;

          .iconfont {
            font-size: 18px;
          }
        }

        .item-desc {
          color: @dark-font-color;
          display: flex;
          flex-direction: column;
          cursor: pointer;
          width: 71.5%;

          .title-label {
            font-weight: 600;
          }

          .content-label {
            color: @light-font-color;
          }
        }

        .item-info {
          display: flex;
          flex-direction: column;
          margin-left: 10px;
          width: 23.5%;

          .provenance-label {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: flex;
            justify-content: center;
            line-height: 24px;

            .series-column {
              margin-right: 3px;
            }
          }
        }

        .content-label, .title-label, .provenance-label {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
}

/deep/ .search-modal-enable-background {
  .ivu-modal-content {
    box-shadow: 0 2px 6px var(--border-color);

    .modal-search-body {
      color: var(--font-color);

      .search-tip {
        color: var(--title-color);
      }

      .modal-search-input {
        color: var(--font-color);

        .input-suffix {
          color: var(--title-color);

          &:hover {
            color: var(--font-color);

            .iconfont {
              border-color: @border-color_normal;
            }
          }

          .iconfont {
            border-color: @border-color_normal;
          }
        }

        .input-box {
          .clear {
            color: var(--title-color);

            &:hover {
              color: var(--font-color);
            }
          }
        }
      }

      .ivu-divider {
        background: var(--border-color);
      }

      .select-search-scope {
        .search-scope-list {
          .search-scope-item {
            .select-scope {
              color: var(--title-color);

              &:hover {
                color: var(--font-color);
              }

              .enter {
                border-color: @border-color_normal;
              }
            }

            &:hover {
              background: var(--dropdown-item-hover);
            }
          }

          .selected {
            background: var(--dropdown-item-hover);
          }
        }
      }

      .search-result-list {
        .search-result-item {
          color: var(--font-color);

          .item-desc {
            color: var(--font-color);

            .content-label {
              color: var(--title-color);
            }
          }
        }
      }
    }
  }
}

/deep/ .search-modal-normal {
  .ivu-modal-content {
    background: @dropdown-background;

    .modal-search-body {
      color: @dark-font-color;
    }
  }
}


/deep/ .message-box {
  .ivu-icon-ios-close {
    font-size: 35px;
  }

  .ivu-modal-body {
    padding: 0 0 0 16px;
  }
}

.enable-background {
  background: unset !important;
  .layout-module_directoryWrapper {
    background: unset !important;
    color: var(--font-color) !important;
    //border-color: var(--border-color);

    .layout-module_fixed {
      background: var(--theme-color);
      border-color: var(--border-color) !important;
    }

    .layout-module_directory {
      .crumb-text {
        color: var(--font-color) !important;

        &:hover {
          color: var(--title-color) !important;
        }
      }

      .search-bar {
        color: var(--font-color) !important;
        background: var(--rj-editor-bg-color) !important;

        &:hover {
          background: var(--dropdown-item-hover) !important;
        }
      }

      .home-nav:hover, .active-home {
          background: var(--dropdown-item-hover) !important;
      }

      .nav-tabs {
        .tabs-bar .tab-title {
          .iconfont {
            color: var(--title-color) !important;
          }

          &:hover {
            background: var(--dropdown-item-hover) !important;
          }
        }

        .action-item {
          color: var(--title-color) !important;
        }

        /deep/ .ivu-list-items {
          .current-article {
            background: var(--dropdown-item-hover) !important;
          }

          .ivu-list-item {
            border-color: var(--border-color);

            .ivu-list-item-meta-description {
              .title {
                color: var(--font-color) !important;
              }

              .description {
                color: var(--title-color) !important;
              }
            }

            &:hover {
              background: var(--dropdown-item-hover) !important;
            }
          }
        }
      }
    }
  }

  .reader-route-view {
    background: var(--theme-color) !important;
    color: var(--font-color) !important;

    /deep/.ColumnOverview-module {
      background: var(--theme-color);

      .ColumnOverview-module_docCount, .ColumnOverview-module_wordCount {
        color: var(--title-color);
      }

      .ColumnOverview-module_count {
        color: var(--font-color) !important;
      }

      .action-more, .action-collect {
        .menu-btn {
          color: var(--font-color) !important;
        }

        &:hover {
          background: var(--dropdown-item-hover) !important;
        }
      }
    }

    /deep/ .operate-more {
      .ant-popover-inner {
        background-color: var(--dropdown-item-hover);

        .ant-popover-inner-content {
          color: var(--font-color);

          .del {
            &:hover {
              color: var(--title-color);
            }
          }
        }
      }
    }
  }

  /deep/ .full-screen {
    .layout-module_headerWrapper {
      background: var(--theme-color) !important;
    }

    .layout-module_bookContentWrapper {
      background: var(--theme-color) !important;
    }
  }

  /deep/ .layout-module_headerWrapper {
    border-color: @border-color_normal !important;
    background: unset !important;

    .header-crumb, .header-action {
      color: var(--font-color) !important;
    }
  }

  /deep/ .layout-module_bookContentWrapper {
    background: unset !important;

    .doc-article-title {
      color: var(--font-color) !important;
    }
  }

  /deep/ .layout-module_asideWrapper {
    .reader-toc-pin, .toc-item-text {
      color: var(--font-color) !important;
    }

    .toc-selected {
      color: var(--font-color) !important;
    }
  }

  /deep/ .am-engine {
    background: unset !important;
    color: var(--font-color) !important;

    .data-codeblock-container {
      .data-codeblock-content {
        background: unset;

        .CodeMirror-sizer {
          .CodeMirror-lines {
            .CodeMirror-cursor {
              border-color: var(--font-color);
            }

            .CodeMirror-code {
              .CodeMirror-line {
                color: var(--font-color);
              }
            }
          }
        }

        .CodeMirror-gutters {
          color: var(--title-color);
          background: var(--on-theme-bg-color);
        }
      }
    }

    h1, h2, h3, h4, h5, h6 {
      color: var(--font-color);
    }

    .data-list {
      color: var(--font-color);
    }
  }

  // 标题显示ui
  /deep/ .data-anchor-button {
    background: var(--dropdown-item-hover);
    color: var(--title-color);
  }

  // 代码块工具栏
  /deep/ .data-card-toolbar {

    .data-toolbar-group {
      background: var(--dropdown-bg-color);
      border-color: @border-color_normal;

      .data-toolbar-item:not(.data-toolbar-item-input):hover, .data-toolbar-item.active:not(.data-toolbar-item-input) {
        background-color: var(--dropdown-item-hover);
        border-radius: 4px;
      }

      .data-toolbar-btn {
        color: var(--title-color);
      }

      .ivu-select-selection {
        background: var(--dropdown-bg-color);
        border-color: @border-color_normal;

        .ivu-select-input {
          color: var(--font-color);
        }
      }

      .ivu-select-dropdown {
        background: var(--dropdown-bg-color);

        .ivu-select-item:hover, .ivu-select-item-focus {
          background: var(--dropdown-item-hover);
          color: var(--font-color);
        }
      }

      .data-toolbar-switch:hover {
        background: var(--dropdown-item-hover);
      }
    }
  }

  /deep/ .doc-footer {
    .reward-module_like .like-count {
      color: var(--title-color);
    }

    .article-module_info .info_meta {
      .reader-meta-wrapper .meta-left .meta-item {
        color: var(--title-color);

        .item-content a {
          color: var(--title-color);
        }
      }

      .social-share {
        color: var(--title-color);

        .xlweibo, .wechat {
          color: var(--title-color);
        }

        .iconfont:hover {
          color: var(--font-color);
        }
      }
    }
  }

  /deep/ .ivu-drawer {
    color: var(--font-color) !important;

    .ivu-drawer-content {
      background: var(--dropdown-bg-color);

      .ivu-drawer-header {
        &:hover {
          color: var(--title-color) !important;
        }
      }

      .ivu-drawer-body {
        .drawer-setting-item {
          background-color: var(--dropdown-item-hover) !important;

          .label_desc {
            color: var(--title-color) !important;
          }
        }

        .article-time {
          span {
            color: var(--title-color);
          }
        }

        .doc-setting-btn {
          &:hover {
            background: var(--dropdown-bg-color) !important;
          }
        }

        .summary {
          .ivu-input {
            color: var(--font-color);
          }
        }

        .category {
          .label {
            .label-tip {
              color: var(--title-color);
            }
          }

          .category-group {
            .ivu-select {
              color: var(--font-color);

              .ivu-select-selection {
                background: var(--dropdown-bg-color);
                border-color: @border-color_normal;
              }

              .ivu-select-dropdown {
                background: var(--dropdown-bg-color);
                border: 1px solid @border-color_normal;

                .ivu-select-dropdown-list {
                  margin-bottom: unset;

                  .ivu-select-item {
                    color: var(--title-color);

                    &:hover {
                      background: var(--dropdown-item-hover);
                    }
                  }

                  .ivu-select-item-focus {
                    background: var(--dropdown-item-hover);
                  }
                }
              }
            }

            .ivu-select-visible .ivu-select-selection {
              border-color: @primary-color;
            }

            .ivu-select-disabled .ivu-select-selection {
              background: var(--dropdown-item-hover);
              color: @grey-white-font-color;
            }
          }
        }

        .tags {
          .label {
            .label-tip {
              color: var(--title-color);
            }
          }

          .tag-add-control {
            .ivu-input {
              color: var(--font-color);
            }

            .empty-to-add {
              background: var(--dropdown-item-hover);
              color: var(--font-color);

              &:hover {
                background: var(--on-theme-bg-color);
              }
            }
          }
        }

        .history-version {
          .new-version-tag {
            .ivu-input {
              color: var(--font-color);
            }

            .ivu-btn-text {
              color: var(--title-color);
            }
          }

          .doc-version {
            background: var(--dropdown-bg-color);

            .doc-version-basic {
              color: var(--font-color);

              .ivu-input {
                color: var(--font-color);
              }
            }

            .doc-version-action {
              display: flex;
              justify-content: space-between;
              align-items: center;

              .doc-version-time {
                color: var(--title-color);
              }

              .bianji, .delete {
                color: var(--title-color);
              }
            }
          }
        }
      }
    }
  }

  /deep/ .input-lock {
    border-color: var(--rj-editor-bg-color) !important;
    color: var(--font-color);
    background: var(--rj-editor-bg-color);
  }

  /deep/ .comment-box {
    .u-editor {
      border-color: var(--rj-editor-bg-color);
      background: var(--rj-editor-bg-color);
    }

    .active {
      border-color: @primary-color;
    }
  }

  /deep/ .reply-list {
    background: var(--dropdown-item-hover);

    .pagination {
      .page-item {
        .page-link {
          color: var(--font-color) !important;
        }
      }
    }
  }

  /deep/ .emoji-selector {
    background: var(--dropdown-bg-color);
    box-shadow: 0 0 4px 0 rgba(255, 255, 255, 0.15);
  }

  /deep/ .tabpane-tree {
    .ivu-tree-children {
      .ivu-tree-title {
        color: var(--font-color);

        &:hover {
          background: var(--dropdown-item-hover);
        }
      }

      .ivu-tree-title-selected {
        background: var(--dropdown-item-hover);

        &:hover {
          background: var(--dropdown-item-hover);
        }
      }

      .ivu-icon {
        color: var(--font-color);
      }
    }
  }

  /deep/ .number-home {
    .content {
      background: var(--theme-color);

      .ivu-btn {
        background: var(--dropdown-item-hover);
      }
    }
  }
}

.normal-background {
  height: unset;
  /deep/ .input-lock {
    color: @dark-font-color;
    border: 1px solid @comment-reply-editor-background;
    background: @comment-reply-editor-background;
  }

  /deep/ .comment-list {
    .user-card {
      .name {
        color: @dark-font-color;
      }
    }

    .u-fold {
      color: @dark-font-color;
    }
  }

  /deep/ .comment-box .user-info {
    color: @dark-font-color;
  }

  /deep/ .rich-input {
    color: @dark-font-color;
  }

  /deep/ .reply-list {
    background: #fcfbfb;
  }

  /deep/ .user-info-card-box .ant-popover-content .ant-popover-inner {
    background: #ffffff;
    border-color: @light-border-color;

    .signature-text {
      color: @light-font-color !important;
    }
  }

  /deep/ .dropdown-background {
    background: @dropdown-background;
    border: 1px solid @border-color_normal;

    .ivu-dropdown-item {
      color: @dark-font-color;

      &:hover {
        background: @editor-item-hover;
      }
    }
  }
}

/deep/ .normal-background {
  .layout-message-notification {
    color: @dark-font-color;

    .msg-notify-menu {
      .menu-item {
        .active-menu, .item:hover {
          background: @editor-item-hover;
        }

        .line {
          background: @border-004;
        }
      }
    }

    .msg-notify-body {
      .module-tabs-tabpane-active {
        color: @dark-font-color;

        .tabs-tabpane-head {
          color: @dark-font-color;
        }

        .notification-item {
          .context-actor, .action-content, .context-subject {
            color: @dark-font-color !important;
          }

          .item-content, .content-warp {
            color: @light-font-color !important;
          }

          &:hover {
            background-color: @editor-item-hover !important;
          }
        }
      }

      .tabs-message-holder {
        .session-list {
          border-color: @border-004;

          .list-container {
            .list-item {

            }

            .list-item:hover, .active {
              background-color: @editor-item-hover !important;
            }
          }
        }
      }

      .session-box {
        .dialog {
          background-color: @dropdown-item-hover !important;

          .title {
            color: @dark-font-color !important;
          }

          .message-list {
            .msg-system {
              color: @light-font-color !important;
            }

            .message-action {
              color: @light-font-color !important;
            }
          }

          .is-black {
            background-color: @dropdown-item-hover !important;
          }
        }
      }
    }
  }
}